﻿@namespace DevToys.Blazor.Pages.SubPages
@using DevToys.Localization.Strings.ToolGroupPage;
@using DevToys.Blazor.Core.Helpers;
@inherits MefComponentBase

@if (ViewModel.IsAllToolsGroup)
{
    <div id="@HeroId" class="hero"></div>
}

<GridView @ref=_gridView
          Class ="entrance-theme-transition tool-group-grid-view"
          ItemsSource="@ViewModel.Tools"
          ItemMinWidth="330"
          OnItemClick=@OnToolSelected>
    <Header>
        @if (ViewModel.IsAllToolsGroup)
        {
            <StackPanel Orientation="UIOrientation.Horizontal">
                <h1 class="text-block type-title-large no-wrap hero-title">
                    <span>@ToolGroupPage.WelcomeTo</span><span>&nbsp;</span><span>DevToys</span>
                </h1>
                <TextBlock Appearance="@TextBlockAppearance.Caption"
                           NoWrap="true"
                           VerticalAlignment="@UIVerticalAlignment.Bottom"
                           Text="@ToolGroup.DisplayVersionNumber.Value"/>
            </StackPanel>
        }
        else
        {
            <TextBlock Appearance="@TextBlockAppearance.Title" Style="font-size: 24px !important" Text="@ViewModel.HeaderText" />
        }
    </Header>
    <GroupHeaderTemplate Context="item">
        <TextBlock Appearance="@TextBlockAppearance.Subtitle" Text="@item" />
    </GroupHeaderTemplate>
    <ItemTemplate Context="item">
        <div class="tool-group-grid-view-item">
            <div class="icon">
                <FontIcon Height="64"
                          Width="64"
                          FontFamily="@item.IconFontName"
                          Glyph="@item.IconGlyph" />
            </div>
            <div class="title">
                <TextBlock Appearance="@TextBlockAppearance.BodyStrong" Text="@item.LongOrShortDisplayTitle" />
            </div>
            <div class="description">
                <TextBlock Appearance="@TextBlockAppearance.Caption" Text="@item.Description" />
            </div>
            <div class="buttons" @onclick:stopPropagation="true">
                <Button HorizontalAlignment="UIHorizontalAlignment.Right"
                        Class="button"
                        Appearance="@ButtonAppearance.Neutral"
                        ToolTip="@ToolGroupPage.OpenInNewWindow"
                        @onclick="() => OnOpenInNewWindow(item)">
                    <FontIcon Class="fonticon" Glyph="@('\uEE7A')" />
                </Button>
            </div>
        </div>
    </ItemTemplate>
    <Footer>
        @if (ViewModel.IsAllToolsGroup)
        {
            <InfoBar Severity="InfoBarSeverity.Informational"
                     IsClosable="false"
                     IsOpened="true"
                     Title="@ToolGroupPage.NotFindingTool"
                     Message="@ToolGroupPage.NotFindingToolOpenFeatureRequest"
                     ActionButtonText="@ToolGroupPage.NotFindingToolSuggestIdea"
                     ActionButtonClicked="@OnSuggestToolIdeaClick" />
        }
    </Footer>
</GridView>